<!doctype html>
<html class="no-js" lang="en">

<!-- Mirrored from creatively.equiet.sk/pricing_boxes.html by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 14 Oct 2012 11:07:09 GMT -->
<head>
	<meta charset="utf-8">

	<!-- Page title -->
	<title>Creatively Site Template</title>

	<!-- Page icon -->
	<link rel="shortcut icon" href="favicon.png">

	<!-- Stylesheet -->
	<link rel="stylesheet" href="css/style.css">
	
	<!-- Nivo Slider stylesheet -->
	<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
	
	<!-- Fancybox stylesheet -->
	<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

	<!-- Modernizr which enables HTML5 elements & feature detects -->
	<script src="js/libs/modernizr-1.7.min.js"></script>
		
	<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
	<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
	

	<!-- Customization -->
	<style type="text/css">
		#customization {
			background-color: rgba(255,255,255,0.9);
			width: 156px;
			position: fixed;
			top: 50%;
			margin: -270px 0 0 10px;
			z-index: 100;
			-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
			-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7); box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
		}
			.no-rgba #customization {
				background-color: #fff;
			}
			#customization section, #customization .hide {
				background-color: #fff;
				padding: 10px;
				margin: 5px;
				-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
				-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.7); -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.7); box-shadow: 0px 0px 2px rgba(0,0,0,0.7);
			}
				#customization .hide {
					display: block;
					float: right;
					width: auto;
				}
				#customization h2 {
					font-family: "Droid Sans", Arial, sans-serif;
					font-style: normal;
					font-size: 13px;
					font-weight: bold;
					line-height: 20px;
					background: none;
					padding: 0;
				}
				#customization a {
					display: inline-block;
					width: 16px;
					height: 16px;
					margin: 1px;
					float: left;
				}
					#customization .selected {
						-moz-box-shadow: 0px 0px 3px #000; -webkit-box-shadow: 0px 0px 3px #000; box-shadow: 0px 0px 3px #000;
						margin: 0;
						border: 1px solid #ccc;
					}				
	</style>

</head>
 

<body>

<!-- Wrapper begin --><div id="wrapper" class="clearfix">

<!-- Header -->
<header>
	<div class="container_12">
		<h1 class="grid_4"><a href="index-2.html">Creatively</a></h1>
		<nav class="grid_8">
			<ul class="right">
				<li>
					<a href="index-2.html">Home</a>
					<ul>
						<li><a href="index-2.html">Standard</a></li>
						<li><a href="index_2.html">Nivo Slider</a></li>
					</ul>
				</li>
				<li>
					<a href="about.html">About</a>
					<ul>
						<li><a href="about.html">About</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</li>
				<li>
					<a href="services.html">Services</a>
				</li>
				<li>
					<a href="portfolio.html">Portfolio</a>
					<ul>
						<li><a href="portfolio.html">4 columns</a></li>
						<li><a href="portfolio_2.html">3 columns</a></li>
						<li><a href="portfolio_3.html">1 column</a></li>
					</ul>
				</li>
				<li>
					<a href="blog.html">Blog</a>
					<ul>
						<li><a href="blog.html">Blog 1</a></li>
						<li><a href="blog_2.html">Blog 2</a></li>
						<li><a href="blogpost.html">Blogpost</a></li>
					</ul>
				</li>
				<li class="selected">
					<a href="pricing_boxes.html">Pages</a>		
					<ul>
						<li><a href="pricing_boxes.html">Pricing boxes</a></li>
						<li><a href="pricing_table.html">Pricing table</a></li>
						<li><a href="eshop.html">E-shop</a></li>
						<li><a href="typography.html">Typography</a></li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</header>

<!-- Container begin --><div class="container_12">

<!-- MAIN CONTENT BEGIN -->

 <!-- Page title -->
<section id="title">
	
	<!-- Heading -->
	<h1 class="grid_5">Pages <span>Pricing boxes</span></h1>
	
	<!-- Submenu -->
	<nav class="grid_7">
		<ul>
			<li class="selected"><a href="pricing_boxes.html">Pricing boxes</a></li>
			<li><a href="pricing_table.html">Pricing table</a></li>
			<li><a href="eshop.html">E-shop</a></li>
			<li><a href="typography.html">Typography</a></li>
		</ul>
	</nav>
		
</section>

<!-- Pricing boxes -->
<ul class="pricing_boxes">

	<li class="grid_3">
		<h2>Plan A</h2>
		<span><strong>$ 9</strong> / month</span>
		<ul>
			<li>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Dolor sit</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3><strong>5</strong> metus magna</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Consectetur adipiscing</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Maecenas ut lacinia</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>				
				<a href="#" class="button_green_big">Buy</a>
			</li>
		</ul>
	</li>
	
	<li class="top grid_3">
		<h2>Plan B</h2>
		<span><strong>$ 19</strong> / month</span>
		<ul>
			<li>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Dolor sit</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3><strong>5</strong> metus magna</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Consectetur adipiscing</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Maecenas ut lacinia</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>				
				<a href="#" class="button_green_big">Buy</a>
			</li>
		</ul>
	</li>
	
	<li class="grid_3">
		<h2>Plan C</h2>
		<span><strong>$ 49</strong> / month</span>
		<ul>
			<li>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Dolor sit</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3><strong>5</strong> metus magna</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Consectetur adipiscing</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Maecenas ut lacinia</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>				
				<a href="#" class="button_green_big">Buy</a>
			</li>
		</ul>
	</li>
	
	<li class="grid_3">
		<h2>Plan D</h2>
		<span><strong>$ 99</strong> / month</span>
		<ul>
			<li>
				<h3>Lorem ipsum</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Dolor sit</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3><strong>5</strong> metus magna</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Consectetur adipiscing</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>
				<h3>Maecenas ut lacinia</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</li>
			<li>				
				<a href="#" class="button_green_big">Buy</a>
			</li>
		</ul>
	</li>
	
</ul> 

<!-- MAIN CONTENT END -->

<!-- Container end --></div>

<!-- Wrapper end --></div>

<!-- Footer -->
<footer>
	<div class="container_12">
		<div class="social grid_2">
			<h6>Social</h6>
			<p>
				<a href="#"><img src="img/icons/rss_square.png" alt="RSS" /></a>
				<a href="#"><img src="img/icons/social_facebook.png" alt="Facebook" /></a>
				<a href="#"><img src="img/icons/social_linked_in.png" alt="Linked in" /></a>
				<a href="#"><img src="img/icons/social_twitter.png" alt="Twitter" /></a>
				<a href="#"><img src="img/icons/social_flickr.png" alt="Flickr" /></a>
			</p>
		</div>
		<div class="links grid_6">
			<h6>Links</h6>
			<p>
				<a href="#">Home</a>
				<a href="#">About us</a>
				<a href="#">Contact</a>
				<a href="#">Services</a>
				<a href="#">Portfolio</a>
				<a href="#">Pages</a>
			</p>
		</div>
		<div class="copyright grid_4">
			<h6><a href="#">Creatively</a></h6>
			<p>&copy; 2011 Company name. All rights reserved.</p>
		</div>
	</div>
</footer>
	
<!-- Load main script -->
<script src="js/script.js"></script>

<!-- Load Nivo Slider -->
<script src="js/libs/jquery.nivo.slider.pack.js"></script>

<!-- Load Fancybox -->
<script src="js/libs/jquery.fancybox-1.3.4.pack.js"></script>

<!-- Load Twitter news stream -->
<script src="js/libs/jquery.tweet.js"></script>


<!-- Customization -->
<div id="customization">

	<a href="#" class="hide"><img src="img/hide.png" alt="" /></a>
	
	<div class="options float">
	
		<section class="header_color clearfix">
			<h2>Header pattern</h2>
			<div class="header_white">
				<a href="#" data-src="light_honeycomb.png"></a>
				<a href="#" data-src="little_pluses.png"></a>
				<a href="#" data-src="45degreee_fabric.png"></a>
				<a href="#" data-src="60degree_gray.png"></a>	
				<a href="#" data-src="beige_paper.png"></a>
				<a href="#" data-src="bright_squares.png"></a>
				<a href="#" data-src="brushed_alu.png"></a>
				<a href="#" data-src="concrete_wall_2.png"></a>
				<a href="#" data-src="concrete_wall_3.png"></a>
				<a href="#" data-src="white_sand.png"></a>
				<a href="#" data-src="vichy.png"></a>
				<a href="#" data-src="wavecut.png"></a>
				<a href="#" data-src="white_carbon.png"></a>
				<a href="#" data-src="rockywall.png"></a>
				<a href="#" data-src="smooth_wall.png"></a>
				<a href="#" data-src="noisy.png"></a>
				<a href="#" data-src="old_mathematics.png"></a>
				<a href="#" data-src="paper_1.png"></a>
				<a href="#" data-src="paper_2.png"></a>
				<a href="#" data-src="paper_3.png"></a>
				<a href="#" data-src="pinstripe.png"></a>
				<a href="#" data-src="leather_1.png"></a>
				<a href="#" data-src="cork_1.png"></a>
				<a href="#" data-src="double_lined.png"></a>
				<a href="#" data-src="exclusive_paper.png"></a>
				<a href="#" data-src="fabric_1.png"></a>
				<a href="#" data-src="soft_wallpaper.png"></a>
				<a href="#" data-src="subtle_freckles.png"></a>
				<a href="#" data-src="subtle_orange_emboss.png"></a>
				<a href="#" data-src="green_gobbler.png"></a>
				<a href="#" data-src="grunge_wall.png"></a>
				<a href="#" data-src="handmadepaper.png"></a>
			</div>
			<div class="header_black">
				<a href="#" data-src="always_grey.png"></a>
				<a href="#" data-src="brushed_alu_dark.png"></a>
				<a href="#" data-src="padded.png"></a>
				<a href="#" data-src="gray_sand.png"></a>
				<a href="#" data-src="crossed_stripes.png"></a>
				<a href="#" data-src="green-fibers.png"></a>
				<a href="#" data-src="tactile_noise.png"></a>
				<a href="#" data-src="black_denim.png"></a>
				<a href="#" data-src="black-Linen.png"></a>
				<a href="#" data-src="blackmamba.png"></a>
				<a href="#" data-src="carbon_fibre.png"></a>
				<a href="#" data-src="dark_stripes.png"></a>
				<a href="#" data-src="darth_stripe.png"></a>
				<a href="#" data-src="concrete_wall.png"></a>
				<a href="#" data-src="black_paper.png"></a>
				<a href="#" data-src="micro_carbon.png"></a>
				<a href="#" data-src="random_grey_variations.png"></a>
				<a href="#" data-src="wood_1.png"></a>
			</div>
		</section>
		
		<section class="showcase_color clearfix">
			<h2>Showcase pattern</h2>
			<a href="#" data-src="light_honeycomb.png"></a>
			<a href="#" data-src="little_pluses.png"></a>
			<a href="#" data-src="45degreee_fabric.png"></a>
			<a href="#" data-src="60degree_gray.png"></a>	
			<a href="#" data-src="beige_paper.png"></a>
			<a href="#" data-src="bright_squares.png"></a>
			<a href="#" data-src="brushed_alu.png"></a>
			<a href="#" data-src="concrete_wall_2.png"></a>
			<a href="#" data-src="concrete_wall_3.png"></a>
			<a href="#" data-src="white_sand.png"></a>
			<a href="#" data-src="vichy.png"></a>
			<a href="#" data-src="wavecut.png"></a>
			<a href="#" data-src="white_carbon.png"></a>
			<a href="#" data-src="rockywall.png"></a>
			<a href="#" data-src="smooth_wall.png"></a>
			<a href="#" data-src="noisy.png"></a>
			<a href="#" data-src="old_mathematics.png"></a>
			<a href="#" data-src="paper_1.png"></a>
			<a href="#" data-src="paper_2.png"></a>
			<a href="#" data-src="paper_3.png"></a>
			<a href="#" data-src="pinstripe.png"></a>
			<a href="#" data-src="leather_1.png"></a>
			<a href="#" data-src="cork_1.png"></a>
			<a href="#" data-src="double_lined.png"></a>
			<a href="#" data-src="exclusive_paper.png"></a>
			<a href="#" data-src="fabric_1.png"></a>
			<a href="#" data-src="soft_wallpaper.png"></a>
			<a href="#" data-src="subtle_freckles.png"></a>
			<a href="#" data-src="subtle_orange_emboss.png"></a>
			<a href="#" data-src="green_gobbler.png"></a>
			<a href="#" data-src="grunge_wall.png"></a>
			<a href="#" data-src="handmadepaper.png"></a>
		</section>
		
	</div>
	
</div>
<script>
$(function () {
	$(".options a").each(function () {
		$(this).css("background", "url(./img/patterns/" + $(this).attr("data-src") + ")");
	});
	$("#customization section a").click(function () {
		$(this).parents('section').find('a').removeClass("selected");
		$(this).addClass("selected");
	});
	$("#customization .header_color a").click(function () {
		$("header")
			.css("background-image", "url(./img/patterns/" + $(this).attr("data-src") + ")")
			.removeClass("header_black")
			.removeClass("header_white")
			.addClass($(this).parent().attr("class"))
		;
	});
	if ($("#showcase").length == 0) $("#customization .showcase_color").css('display', 'none');
	$("#customization .showcase_color a").click(function () {
		$("#showcase").css("background-image", "url(./img/patterns/" + $(this).attr("data-src") + ")");
	});
	$("#customization .hide").toggle(function () {
		$("#customization .options").slideUp("slow", function () {
			$("#customization").animate({"margin-left": "-110px"}, "slow");
			$("#customization .hide img").attr("src", "img/show.png");		
		});	
	}, function () {
		$("#customization").animate({"margin-left": "10px"}, "slow", function () {
			$("#customization .options").slideDown("slow");
			$("#customization .hide img").attr("src", "img/hide.png");
		});	
	});
});
</script>

<!-- Google Analytics -->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2529322-9']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

</body>

<!-- Mirrored from creatively.equiet.sk/pricing_boxes.html by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 14 Oct 2012 11:07:09 GMT -->
</html>
